<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('轮播图片')"/>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="ui-layout-content">
            	<input type="hidden" id="defaultPic" name="defaultPic" th:value="${defaultPic}">
                <form class="" id="blogIndexPicForm">
                    <div class="form-group" th:each="carouselMap,cmStat:${carouselMaps}" style="text-align: center;">
                        <label class="control-label" style="margin-left: 20px;">图片[[${cmStat.count}]]:</label>
                        <input type="hidden" th:id = "carouselId+(${cmStat.count})" name="carouselId" th:value="${carouselMap.carouselId}">
                        <input type="hidden" name="imgUrl" th:id = "headerImgPath+(${cmStat.count})"  th:value="${carouselMap.imgUrl}">
                        <img th:src="${carouselMap.imgUrl}" width="312px" th:onclick="changeImg([[${cmStat.count}]]);"
                             height="120px" th:id = "headerImg+(${cmStat.count})" th:name = "headerImg+(${cmStat.count})" title="点击图片更换标图"/>
                        <label class="control-label" style="">
                        	<a class="btn btn-danger btn-xs " href="javascript:void(0)" th:onclick="delImg([[${carouselMap.carouselId}]],[[${cmStat.count}]]);"><i class="fa fa-remove"></i> 删除</a>
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<script>

    $(function () {
        $("#blogAddForm").validate({
            rules: {
            },
            messages: {
            },
        });
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
    });

    
    function callBackHeaderImg1(fileUrl){
    	$("#headerImg1").attr("src", fileUrl);
    	$("#headerImgPath1").val(fileUrl);
    }
    
    function callBackHeaderImg2(fileUrl){
    	$("#headerImg2").attr("src", fileUrl);
    	$("#headerImgPath2").val(fileUrl);
    }
    
    function callBackHeaderImg3(fileUrl){
    	$("#headerImg3").attr("src", fileUrl);
    	$("#headerImgPath3").val(fileUrl);
    }

    function changeImg(index) {
    	layer.open({
            type: 2,
            shade: 0.3,
            title: false,
            fix: false,
            area: ['auto','420px'],//$(window).width() / 1.1 + 'px'
            content: "/blog/blog/image?width=780&height=300&callBackMethod=window.parent.callBackHeaderImg"+index,
            shadeClose: true,// 是否点击遮罩关闭
            btn: ['<i class="fa fa-check"></i> 确认', '<i class="fa fa-close"></i> 关闭'],
            yes: function (index, layero) {
          	    var iframeWin = window[layero.find('iframe')[0]['name']]; 
          	 	iframeWin.uploadFile();//得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
            },
            cancel: function () {
                return true;
            }
        });
    }


    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#blogIndexPicForm").serializeArray();
            console.info(data);
            $.ajax({
	            type: "POST",
	            url: "/system/carouselMap/blogSave",
	            data: data,
	            dataType: "json",
	            success: function (data) {
	            	console.info(data);
	                if (data.code == 200) {
	                	layer.msg(data.msg, {icon: 1});
	                }else{
	                	 layer.msg(data.msg, {icon: 2});
	                }
	            },
	            error: function (jqXHR) {
	                layer.msg('发送错误：' + jqXHR.status, {icon: 2});
	            },
	        });
        }
    }
    
    //关闭弹窗
    function closeDialog(){
    	var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
    
    function delImg(id,idx){
    	layer.confirm('确定删除该图片吗?', {
            icon: 3,
            title: "系统提示",
            btn: ['确认', '取消']
        }, function (index) {
            layer.close(index);
            $.ajax({
	            type: "delete",
	            url: "/system/carouselMap/blogEditRemove",
	            data: {"carouselId":id},
	            dataType: "json",
	            success: function (data) {
	            	console.info(data);
	                if (data.code == 200) {
	                	layer.msg(data.msg, {icon: 1});
	                	$("#carouselId"+idx).val("0");
	                    $("#headerImg"+idx).attr("src", $("#defaultPic").val());
	                	$("#headerImgPath"+idx).val($("#defaultPic").val());
	                }else{
	                	 layer.msg(data.msg, {icon: 2});
	                }
	            },
	            error: function (jqXHR) {
	                layer.msg('发送错误：' + jqXHR.status, {icon: 2});
	            },
	        });
        });
    }
</script>
</body>

</html>